<template>
  <f7-page>
    <div style="width:100%;padding: calc(20px * var(--ratio)) calc(32px * var(--ratio)); display: flex; justify-content: space-between;align-items: center; color: #000">
      <div class="left"><f7-link back><f7-icon f7="chevron_left" style="color: #000"></f7-icon></f7-link></div>
      <div class="title">气泡弹出框</div>
      <div class="right"><f7-link><f7-icon f7="ellipsis" style="color: #000"></f7-icon></f7-link></div>
    </div>

    <f7-block>
      <div style="height: 50px"></div>
      <qm-popover
        v-model="showPopover_1"
        trigger="click"
        placement="top-start"
        get-container=".ios-edges"
        title="箭头有8个方向。"
      >

        <template #reference>
         <div style="padding: 20px 35px; background: pink; color: #fff; font-size: 16px">纯文本</div>
        </template>

      </qm-popover>
    </f7-block>

    <f7-block>
      <div style="height: 50px"></div>
      <qm-popover
        v-model="showPopover_2"
        trigger="click"
        placement="top-start"
        get-container=".ios-edges"
        title="箭头有8个方向。字数字数字数字数字数两行"
      >

        <template #reference>
         <div style="padding: 20px 35px; background: pink; color: #fff; font-size: 16px">文本前</div>
        </template>

        <template #before-title>
          <div style="width: 36px; height: 36px; background: #ccc; margin-right: 10px"></div>
        </template>

      </qm-popover>
    </f7-block>

    <f7-block>
      <div style="height: 50px"></div>
      <qm-popover
        v-model="showPopover_3"
        trigger="click"
        placement="top-start"
        get-container=".ios-edges"
        title="箭头有8个方向。字数字数字数字数字数两行"
      >

        <template #reference>
         <div style="padding: 20px 35px; background: pink; color: #fff; font-size: 16px">文本后</div>
        </template>

        <template #after-title>
          <div class="after-title">
              <f7-button
                class="button"
                text="操作按钮"
                fill
                round
                color="white"
                style="color: #131313; height: 25px; line-height: 25px; margin-left: 15px"
              ></f7-button>
            </div>
        </template>

      </qm-popover>
    </f7-block>


    <f7-block>
      <div style="height: 50px"></div>
      <qm-popover
        v-model="showPopover_4"
        trigger="click"
        placement="top-start"
        get-container=".ios-edges"
        title="箭头有8个方向。字数字数字数字数字数两行"
      >

        <template #reference>
         <div style="padding: 20px 35px; background: pink; color: #fff; font-size: 16px">文本前后</div>
        </template>

        <template #before-title>
          <div style="width: 36px; height: 36px; background: #ccc; margin-right: 10px"></div>
        </template>

        <template #after-title>
          <div class="after-title">
              <f7-button
                class="button"
                text="操作按钮"
                fill
                round
                color="white"
                style="color: #131313; height: 25px; line-height: 25px; margin-left: 15px"
              ></f7-button>
            </div>
        </template>

      </qm-popover>
    </f7-block>

    <f7-block>
      <div style="height: 50px"></div>
      <qm-popover
        v-model="showPopover_5"
        trigger="click"
        placement="top-start"
        get-container=".ios-edges"
        :actions="actions"
        @select="select"
      >

        <template #reference>
         <div style="padding: 20px 35px; background: pink; color: #fff; font-size: 16px">列表</div>
        </template>

      </qm-popover>
    </f7-block>

  </f7-page>
</template>

<script>
export default {
  data() {
    return {
      showPopover_1: false,
      showPopover_2: false,
      showPopover_3: false,
      showPopover_4: false,
      showPopover_5: false,

      actRions: [
        { text: "扫一扫", icon: "static/img/stop.png" },
        { text: "收钱", icon: "static/img/stop.png" },
      ],
      dom: null,
    };
  },
  created() {
    setTimeout(()=>{
      this.showPopover_1=true
    }, 500)
  },
  methods: {
    select(v) {
      this.$f7.toast.show({ text: v.text, closeTimeout: 1500, });
    },
    click() {
      console.log(1);
    },
  },
  watch: {
    showPopover(val) {
      console.log("showPopover", val);
    },
  },
};
</script>

<style lang="less" scoped>
</style>
